<template>
    <div class="firefacstruct-down-load-temp" v-loading="loading">
        <el-transfer
            filterable
            v-model="fcFvalue"
            :titles="['待选择消防设施', '已选择消防设施']" 
            :data="data"
            @right-check-change="postRightSelect"
            @change="change">
        </el-transfer>
        <el-row style="margin-top: 10px;float: right;margin-right: 21px;margin-bottom: 20px;">
            <el-button @click="closeFun" round>取消</el-button>
            <el-button type="primary"  @click="downLoadTemp" round>提交</el-button>
        </el-row>
    </div>
</template>
<script>
import { getAllFcsCategoryList } from '@/api/sysConfig'

export default {
    name: '',
    props: {
        organizationId: {
            required: true
        },
        closeFun: {
            required: true
        }
    },
    data() {
        return {
            loading: false,
            data: [],
            fcFvalue: [],
            downLoadTempArr: [],

        }
    },
    created() {
        let that = this
        // 获取数据
        getAllFcsCategoryList().then(res => {
            if(res.status === 200) {
                let arr = []
                for (let i = 0; i < res.data.length; i++) {
                    for(let n = 0; n < res.data[i].fireCtlFacsCategoryList.length; n++) {
                        let obj = res.data[i].fireCtlFacsCategoryList[n]
                        arr.push({
                            key: obj.id,
                            label:  res.data[i].fireSystemName + " -- " + obj.name,
                            disabled: false
                        })
                    }
                }
                that.data = arr
            }
        })
    },
    methods: {
        change(value, direction, movedKeys) {
            let that = this

            that.downLoadTempArr = value
        },
        postRightSelect(value, direction, movedKeys) {
            let that = this
            that.downLoadTempArr = []
            if(value.length > 0){
                $.each(value,function(index,val){
                    that.downLoadTempArr.push(val)
                })
            }
        },
        downLoadTemp() {
            let that = this
            let categoryIds = that.downLoadTempArr.toString();
            if (!categoryIds) {
                that.$message({
                    type: 'warning',
                    message: '请勾选已选择的消防设施!'
                })
                return;
            }
            // if(that.downLoadTempArr.length > 10){
            //     that.$message({
            //         type: 'warning',
            //         message: '消防设施模板超过上限（不超过10个模板）'
            //     })
            //     return;
            // }
            that.loading = true
            window.location.href = that.GLOBAL.baseURL + 'fcf/downFTemplate?organizationId=' + that.organizationId + "&categoryIds=" + categoryIds;
            that.closeFun()
            that.loading = false
        }
    }
}
</script>
<style lang="scss">
.firefacstruct-down-load-temp {
    .el-transfer-panel {
        width: 43%;
        .el-transfer-panel__filter {
            width: auto;
        }
    }
    .el-transfer{
        display: inline-flex;
        justify-content: space-around;
        width: 100%;
        height: 100%;
        display: flex;
        .el-transfer__buttons{
            width: 200px;
            height: 100%;
            align-self: center;
            button{
                height: 40px;
            }
        }
        .el-transfer__button:first-child{
            margin-bottom: 0;
        }
    }
}
</style>

